<template>
	<view>
		<view class="uni-list list-pd">
			<view class="uni-list-cell cell-pd" style="padding-left: 35%;padding-right: 35%;">
				<view class="uni-uploader">
					<view class="uni-uploader-body">
						<view class="uni-uploader__files">
							<block v-for="(image,index) in imageList" :key="index">
								<view style="position: relative;" class="uni-uploader__file">
									<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
									
								</view>
							</block>
							<view style="position: relative;" class="uni-uploader__input-box">
								<view class="uni-uploader__input" @tap="chooseImage"></view>
								<view v-show="flag" class="jindutiao">{{jindu}}%</view>
								
							</view>
						</view>
					</view>
				</view>
				{{s}}
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "../../common/permission.js"
	import {pathToBase64} from '../../js_sdk/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				imageList: [],
				jindu:0,
				flag:false,
				s:''
			}
		},
		onLoad() {

		},
		methods: {
			chooseImage: async function(){
					let id = uni.getStorageSync('user').id
				if (this.imageList.length === 1){
					let isContinue = await this.isFullImg();
					// console.log("是否继续?", isContinue)
					if (!isContinue) {
						return;
					}  
				}				
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0])
						//压缩
						uni.compressImage({
						  src: tempFilePaths[0],
						  quality: 30,
						  success: res => {
							  this.flag = true 
							console.log('压缩结果')
						    console.log(res.tempFilePath)
							//base64上传
							pathToBase64(res.tempFilePath)
								.then(base64 => {
									//console.log(base64)
									const uploadTask = uni.uploadFile({
										url: 'https://exam.vip.qydev.com/uploads/images', //仅为示例，非真实的接口地址
										filePath: res.tempFilePath,
										name: 'file',
										formData: {
											'imageType': 'AVATAR',
											'image': base64
										},
										success: (uploadFileRes) => {
											console.log(typeof uploadFileRes)
											const pastUrl = JSON.parse(uploadFileRes.data).data.cloudUrl;
											this.imageList.push(JSON.parse(uploadFileRes.data).data.cloudUrl)
											console.log("上传成功")
											console.log("图片结果为："+pastUrl); 
											this.$emit('func',pastUrl)										
											this.flag = false
										},
										fail: (uploadFileRes) => {
											console.log(typeof uploadFileRes)
											var s=JSON.stringify(uploadFileRes.errMsg)
											console.log('上传失败')
											this.s=s
											uni.showToast({
												title:s,
												image:'../../static/gantan.png'
											})
										}
									});							
									uploadTask.onProgressUpdate((res) => {
										console.log('上传进度' + res.progress);
										this.jindu = res.progress
										console.log('已经上传的数据长度' + res.totalBytesSent);
										console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);						
									});
								})
								.catch(error => {
									console.error(error)
								})
						  }
						})
					}
				});				
				// uni.chooseImage({
				//     count: 1, //默认9										
				//     success: (chooseImageRes) => {
				//     	// this.imageList = this.imageList.concat(chooseImageRes.tempFilePaths);
				// 		// console.log(this.imageList)
				// 		// this.$emit('func',this.imageList)
				// 		 const tempFilePath = chooseImageRes.tempFilePaths[0];
				// 		uni.compressImage({
				// 		  src: tempFilePath,
				// 		  quality: 30,
				// 		  success: res => {
				// 			  this.flag = true
							 
				// 			  pathToBase64(res.tempFilePath).then((base64) => {
				// 			  	console.log(base64)
				// 			  	const uploadTask = uni.uploadFile({
				// 			  	    url: 'https://exam.free.qydev.com/uploads/images', //仅为示例，非真实的接口地址
				// 			  	    filePath: res.tempFilePath,
				// 			  	    name: 'file',
				// 			  	    formData: {
				// 			  			'imageType':'AVATAR',
				// 			  			'image': base64,
				// 			  			// 'uid':id
				// 			  	    },
				// 			  	    success: (uploadFileRes) => {
				// 			  			const pastUrl = JSON.parse( JSON.stringify(JSON.parse(uploadFileRes.data).data)).cloudUrl
				// 			  			this.imageList.push(JSON.parse( JSON.stringify(JSON.parse(uploadFileRes.data).data)).cloudUrl)
				// 			  			this.$emit('func',this.imageList)
				// 			  			console.log("上传成功")
				// 			  	        console.log("图片结果为："+JSON.parse( JSON.stringify(JSON.parse(uploadFileRes.data).data)).cloudUrl); 
				// 			  			this.flag = false
				// 			  	    },
				// 			  		fail: (uploadFileRes) => {
				// 			  		    console.log(uploadFileRes);
				// 			  			console.log('上传失败')
				// 			  			uni.showToast({
				// 			  				title:'上传失败！',
				// 			  				image:'../../static/gantan.png'
				// 			  			})
				// 			  		},
				// 			  	})
				// 			  	uploadTask.onProgressUpdate((res) => {
				// 			  		this.jindu = res.progress
				// 			  		console.log('上传进度' + res.progress);
				// 			  		console.log('已经上传的数据长度' + res.totalBytesSent);
				// 			  		console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
				// 			  	});
				// 			  })
				// 			  }
				// 			  })
						
						
				// 	}
				// })
			}, 
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "是否需要删除当前图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.jindutiao{
		width: 38%;
		height: 26px;
		position: absolute;
		top: 39px;
		left: 36px;
		z-index: 999;
		font-weight: 900;
		color: #CCE6FF;
	}

</style>
